<template>
    <ul class="service-list">
        <li v-for="service in serviceList" :key="service.id" @click="clearLocalStorage">
            <RouterLink
                :to="{ name: '/home/service-list/service-details' , params: { goodsname: service.goodsName  }}"
                class="item-inner"
            >
                <div class="thumbnail_wrapper">
                    <img :src="thumbnail" />
                </div>
                <div class="title" :title="service.goodsName">
                    {{ service.goodsName }}
                </div>
               
                <div class="bottom-info">
                    <div class="pricing">
                        <span class="currency-symbol">￥</span>
                        <span class="price">{{ service.price }}</span>
                        <span v-if="service.discount" class="discount">{{ service.price }}</span>
                    </div>
                    <div v-if="service.salesQty" class="sales-qty">
                        月售
                        <span>{{ service.salesQty }}</span>
                    </div>
                </div>
            </RouterLink>
        </li>
        
    </ul>
</template>

<script lang="ts" setup>
import { ExtractPropTypes, Ref, ref } from 'vue';
import { Service } from '@/types/service';

const props: ExtractPropTypes<{
    serviceList: Array<Service>;
}> = defineProps({
    serviceList: {
        type: Array,
        default: [],
    },
});

const thumbnail = require('@/assets/image/huawei.jpg');
function clearLocalStorage() {
    localStorage.removeItem('orderInfo');
}
</script>

<style scoped>
.service-list {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
}

.service-list > li {
    border-radius: var(--border-radius);
    background-color: var(--section-color);
    width: 200px;
    height: 254px;
    transition: box-shadow 0.3s;
}

.service-list > li:hover {
    box-shadow: 0px 0px 8px 0px #0000004d;
}

.item-inner {
    display: block;
    padding: 10px;
}

.thumbnail_wrapper img {
    width: 180px;
    height: 180px;
}

.title {
    color: var(--font-color);
    margin-top: 8px;
    font-size: var(--font-size-small);
    display: inline-block;
    max-width: 175px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.bottom-info {
    margin-top: 11px;
    display: flex;
    justify-content: space-between;
}

.pricing {
    color: red;
}

.currency-symbol {
    font-size: 14px;
    color: var(--red-color);
}

.price {
    font-size: var(--font-size-extra2);
    margin-right: 7px;
}

.discount {
    display: inline-block;
    font-size: var(--font-size-small);
    border-radius: var(--border-radius);
    border: 1px solid var(--red-color);
    padding: 0 2px;
    vertical-align: 2px;
}

.sales-qty {
    display: flex;
    align-items: flex-end;
    font-size: var(--font-size-small);
    color: var(--font-color-dim);
}
</style>
